<template>
    <div class="my page">
        <div class="con">
            <div class="top">

                <div class="user">
                    <img :src="user.avatar" alt="" class="avatar">
                    <div class="user-info">
                        <div class="name">{{user.name}}  {{user.code}}</div>
                        <div class="phone" v-if="user.mobile">{{user.mobile}}</div>
                        <div class="edit" v-else @click="toEdit">点击完善信息</div>
                    </div>
                </div>

                <div class="level">
                    <div class="lv-top">
                        <span class=" iconfont iconhuiyuan"></span>
                        <span class="lv-name">会员卡</span>
                        <span @click="apply()" class="apply">查看级别</span>
                        <!--                        <span class="iconfont iconarrow_right"></span>-->
                    </div>
                    <div class="lv-bottom">
                        {{level.name}}
                    </div>

                </div>

                <span @click="toEdit" class="iconfont iconsetting"></span>


            </div>


            <div class="bottom" :style="transform" @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove">
                <img src="@/assets/arc.png" class="arc" alt="">
                <div class="content">
                    <div class="account">
                        <div class="item" @click="toRecord(index)" v-for="(account,index) in accountList" :key="index" >
                            <span class="amount" v-if="account">{{account.amount?account.amount:0}}</span>
                            <span class="name" v-if="account">{{accountTypes[account.type]}}</span>
                        </div>
                    </div>

<!--                    <div class="btns">-->
<!--                        <div class="item" @click="toOrder(0)">-->
<!--                            <span class="iconfont iconquanbudingdan1"></span>-->
<!--                            <span>全部订单</span>-->
<!--                        </div>-->
<!--                        <div class="item" @click="toOrder(1)">-->
<!--                            <span class="iconfont icondaifukuan1"></span>-->
<!--                            <span>待付款</span>-->
<!--                        </div>-->
<!--                        <div class="item" @click="toOrder(2)">-->
<!--                            <span class="iconfont iconshouhuo"></span>-->
<!--                            <span>待收货</span>-->
<!--                        </div>-->
<!--                        <div class="item" @click="toOrder(3)">-->
<!--                            <span class="iconfont icontuikuan1"></span>-->
<!--                            <span>退款/售后</span>-->
<!--                        </div>-->
<!--                    </div>-->

                    <!--            <div class="benefit">-->
                    <!--                -->
                    <!--            </div>-->

                    <div class="labels">

                        <div class="item" @click="turn('/user')">
                            <span class="iconfont iconkehu" style="color: #F7895E"></span>
                            <div class="info border-bottom-1px" >
                                <span class="name ">我的客户</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>

                        <div class="item" @click="toDelivery">
                            <span class="iconfont iconkucunx" style="color: #F7895E"></span>
                            <div class="info border-bottom-1px" >
                                <span class="name ">库存发货</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>

                        <div v-if="isWg" class="item" @click="turn('/commission')">
                            <span class="iconfont iconbaoming2" style="color: #F6CE75"></span>
                            <div class="info border-bottom-1px">
                                <span class="name">佣金</span>
                                <span class="right-txt"></span>
         d                       <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>

                        <div v-if="isWg" class="item" @click="turn('/auth')">
                            <span class="iconfont iconkehu" style="color: #F7895E"></span>
                            <div class="info border-bottom-1px" >
                                <span class="name ">我的授权</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>


                        <div class="item" @click="toOrder(0)">
                            <span class="iconfont iconquanbudingdan1" style="color: #F7895E"></span>
                            <div class="info border-bottom-1px" >
                                <span class="name ">我的订单</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>
                        <div v-if="isWg" class="item" @click="toSjyx">
                            <span class="iconfont iconbaoming2" style="color: #00A390"></span>
                            <div class="info border-bottom-1px" >
                                <span class="name ">社集优选</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>

<!--                        <div class="item" @click="turn('/form')">-->
<!--                            <span class="iconfont iconkecheng1" style="color: #F6CE75"></span>-->
<!--                            <div class="info border-bottom-1px">-->
<!--                                <span class="name">添加商品</span>-->
<!--                                <span class="right-txt"></span>-->
<!--                                <span class="iconfont iconarrow_right"></span>-->
<!--                            </div>-->
<!--                        </div>-->

                        <div v-if="this.user.levelId != 5 || !isWg" class="item" @click="toShare">
                            <span class="iconfont iconfenxiang" style="color:#72A486;"></span>
                            <div class="info border-bottom-1px">
                                <span class="name">分享</span>
                                <span class="right-txt">分享给客户</span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>

                        <div class="item" @click="turn('/point/sign')">
                            <span class="iconfont iconqiandao2" style="color:#72A486;"></span>
                            <div class="info border-bottom-1px">
                                <span class="name">签到</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>

                        <!--<div class="item" @click="turn('/form')">-->
                            <!--<span class="iconfont iconkecheng1" style="color: #F6CE75"></span>-->
                            <!--<div class="info border-bottom-1px">-->
                                <!--<span class="name">添加商品</span>-->
                                <!--<span class="right-txt"></span>-->
                                <!--<span class="iconfont iconarrow_right"></span>-->
                            <!--</div>-->
                        <!--</div>-->

                        <div class="item" v-if="isWg" @click="turn('/received')">
                            <span class="iconfont iconquanbudingdan1" style="color: #F7895E"></span>
                            <div class="info border-bottom-1px" >
                                <span class="name ">待收货</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>

                        <div class="item" @click="turn('/account/payment?type=2')">
                            <span class="iconfont iconwallet" style="color: #F7895E"></span>
                            <div class="info border-bottom-1px" >
                                <span class="name ">我的货款</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>
                        <div class="item" @click="turn('/account/payment?type=3')">
                            <span class="iconfont iconwallet" style="color: #F7895E"></span>
                            <div class="info border-bottom-1px" >
                                <span class="name ">分享利润</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>

                        <div class="item" @click="turn('/store')">
                            <span class="iconfont iconkucunx" style="color: #F6CE75"></span>
                            <div class="info border-bottom-1px">
                                <span class="name">我的库存</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>

                        <div class="item" @click="turn('/account/charge')">
                            <span class="iconfont icontuikuan1" style="color: #F7895E"></span>
                            <div class="info border-bottom-1px">
                                <span class="name ">在线充值</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>


                        <div class="item" @click="turn('/address')">
                            <span class="iconfont icondizhi" style="color: #49CEED"></span>
                            <div class="info border-bottom-1px">
                                <span class="name">地址管理</span>
                                <span class="right-txt"></span>
                                <span class="iconfont iconarrow_right"></span>
                            </div>
                        </div>



<!--                        <div class="item" @click="turn('/scan')">-->
<!--                            <span class="iconfont iconsaoma1-copy" style="color:#72A486;"></span>-->
<!--                            <div class="info border-bottom-1px">-->
<!--                                <span class="name">扫一扫</span>-->
<!--                                <span class="right-txt"></span>-->
<!--                                <span class="iconfont iconarrow_right"></span>-->
<!--                            </div>-->
<!--                        </div>-->



<!--                        <div class="item" @click="turn('/card')">-->
<!--                            <span class="iconfont iconkecheng1" style="color: #F6CE75"></span>-->
<!--                            <div class="info border-bottom-1px">-->
<!--                                <span class="name">我的课程</span>-->
<!--                                <span class="right-txt"></span>-->
<!--                                <span class="iconfont iconarrow_right"></span>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                        <div class="item" @click="turn('/confirm')">-->
<!--                            <span class="iconfont iconbaoming2" style="color: #F6CE75"></span>-->
<!--                            <div class="info border-bottom-1px">-->
<!--                                <span class="name">我的报名</span>-->
<!--                                <span class="right-txt"></span>-->
<!--                                <span class="iconfont iconarrow_right"></span>-->
<!--                            </div>-->
<!--                        </div>-->



<!--                        <div class="item">-->
<!--                            <span class="iconfont iconkefu" style="color: #FF9B9B"></span>-->
<!--                            <div class="info border-bottom-1px">-->
<!--                                <span class="name">客服</span>-->
<!--                                <span class="right-txt"></span>-->
<!--                                <span class="iconfont iconarrow_right"></span>-->
<!--                            </div>-->
<!--                        </div>-->

                    </div>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
    import {info,skipToSjyx} from "../../api/user";
    import *  as Dialog from '@/dialog'
    export default {
        name: "index",
        created(){

        },
        activated(){

            info().then(res=>{
                this.user = res.data
                this.accounts = res.extra.accounts
                this.topCode = res.extra.topCode
                this.level = res.extra.level
                if(!this.user.mobile){
                    Dialog.showAlert("请绑定手机号码!").then(res=>{
                        this.$router.push('/my/edit')
                    })
                }
            })
        },
        data() {
            return {
                user: {

                },
                level:{

                },
                accounts:[],
                accountTypes:["代金券","积分数","优惠券","换购券","经验值"],
                startY:0,
                scrollY:0,
                time:false,
                topCode:''
            }
        },
        computed:{
            isWg(){
              return process.env.VUE_APP_NAME == 'wg'
            },
            transform(){

                let style = `transition: all ${this.time} ;transform: translateY(${this.scrollY}px)`

                return style
            },
            accountList(){

                let ta = []
                this.accountTypes.forEach((item,index)=>{
                    let tem = {type:index,amount:0}
                    this.accounts.forEach(it=>{
                        if(it.type == index){
                            tem = it
                        }
                    })

                    ta.push(tem)
                })


                return ta
                // console.log(ta)
                // console.log(this.accountTypes)
                // let ta =  this.accountTypes.map((value, index) =>{
                //     console.log('--'+index)
                //     return {type:index,amount:0}
                // })
                // console.log(ta)
                // return  Object.assign(ta,this.accounts)
            }
        },
        methods:{
            toDelivery(){
              this.$router.push({
                  path:'/transfer/goods',
                  query:{
                      self:true
                  }
              })
            },
            toEdit(){
                this.$router.push({
                    path:'/my/edit',
                    query:{
                        name:this.user.name,
                        mobile:this.user.mobile,
                        back:true
                    }
                })
            },
            toRecord(index){
                this.$router.push({
                    path:'/account/record',
                    query:{
                        type:index
                    }
                })
            },
            apply(){
                this.showAlert()
            },
            showAlert() {
                // this.$createDialog({
                //     type: 'alert',
                //     title: '',
                //     content: '下滑白色区域查看!',
                //     icon: 'cubeic-alert'
                // }).show()
                this.scrollY=30
            },
            turn(path){
                this.$router.push(path)
            },
            toOrder(type){
                this.$router.push({
                    path:'order',
                    query:{
                        type
                    }
                })
            },
            toShare(){
                this.$router.push({
                    path:'share'
                })
            },
            touchStart(e){
                this.time = '0s'
                this.startY = e.targetTouches[0].clientY

            },
            touchMove(e){

                this.scrollY = e.targetTouches[0].clientY - this.startY
                if (this.scrollY>30){
                    this.scrollY = 30
                }
                if(this.scrollY<0){
                    this.scrollY = 0
                }

            },
            touchEnd(){
                this.time= '.4s'
                this.startY = 0
                this.scrollY= 0
            },
            toSjyx(){
                let unionId = this.user.unionId
                let name = this.user.name
                let code = this.user.code
                let tCode = this.user.tcode
                let avatar = this.user.avatar
                let phone = this.user.mobile
                let topUserId =this.user.pid
                let topCode = this.topCode
                // console.log(tCode)
                // console.log(this.user)
                skipToSjyx(unionId,name,code,tCode,avatar,phone,topUserId,topCode).then(res=>{
                     if(res.data==null){
                        const toast = this.$createToast({
                            txt: '请先联系推荐人进入社集优选',
                            type: 'error'
                        })
                        toast.show()
                    }else if(res.code==10000&&res.data!=null){
                        window.location.href='http://app.zmzpl.com/hzcmall'
                    }else{
                        const toast = this.$createToast({
                            txt: '跳转失败',
                            type: 'error'
                        })
                        toast.show()
                    }
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .my
        height 100%
        background-color #F6F6F6
        z-index 1
        .con
            padding-bottom 44px
            .top
                background-color #F0C809
                height 140px
                padding 0 10px

                .user
                    padding 18px 0
                    position relative

                    display flex
                    align-items center

                    .arc
                        width 100%
                        height 18px
                        position absolute
                        left 0
                        right 0
                        bottom 0

                    .avatar
                        width 56px
                        height 56px
                        flex 0 0 56px

                    .user-info
                        color #3D3E38
                        padding-left 10px
                        flex 1
                        height 56px
                        display flex
                        flex-direction column
                        align-items flex-start
                        justify-content center

                        .name
                            font-size 14px
                        .phone,.edit
                            margin-top 13px
                            font-size 10px
                            font-weight 300
                        .edit
                            color red

                .level
                    padding-top 3px
                    border-radius 5px
                    height 80px
                    margin 0 auto
                    background-color #3D3E38
                    opacity 0.9
                    display flex
                    flex-direction column
                    .lv-bottom
                        line-height 40px
                        text-align center
                        font-size 15px
                        color #F9E3A8
                    .lv-top
                        width 100%
                        height 30px
                        display flex
                        align-items center
                        padding-left 10px
                        .iconhuiyuan
                            flex 0 0 23px
                            color #F9E3A8
                            font-size 23px
                        .lv-name
                            flex 1
                            color #F9E3A8
                            margin 0 8px
                            font-size 12px
                        .iconarrow_right
                            font-size 10px
                            color white
                        .apply
                            flex  0 0 70px
                            float right
                            margin-right 20px
                            font-size 11px
                            height 20px
                            line-height 20px
                            text-align center
                            border-radius 20px
                            background-color  #F9E3A8
                .iconsetting
                    font-size 20px
                    color white
                    position absolute
                    top 10px
                    right 10px

            .bottom
                font-size 0
                position relative
                top -19px
                .arc
                    width 100%
                    height 19px
                .content
                    background-color #F6F6F6
                    padding 0 10px
                    .account
                        margin-top -1px
                        position relative
                        z-index 1
                        background-color white
                        display flex
                        height 60px
                        border-radius 5px
                        .item
                            display flex
                            flex-direction column
                            align-items center
                            justify-content center
                            flex 1
                            .amount
                                font-size: 14px;
                                font-weight: 300;
                                color: rgba(255, 109, 35, 1);

                            .name
                                margin-top 5px
                                color #A1A1A1
                                font-size 10px
                    .btns
                        margin-top 10px
                        height 80px
                        display flex
                        align-items center
                        background-color white
                        border-radius 5px
                        .item
                            align-items center
                            justify-items center
                            display flex
                            flex-direction column
                            flex 1
                            color #616977
                            font-size 12px
                            .iconfont
                                color #F7895E
                                font-size 24px
                                margin-bottom 10px
                    .labels
                        margin-top 10px
                        .item
                            padding 0 12px
                            display flex
                            align-items center
                            height 40px
                            background-color white
                            .iconfont
                                flex  0 0 16px
                                font-size 16px
                            .info
                                margin-left 10px
                                height 100%
                                display flex
                                align-items center
                                flex 1
                                border-color 1PX solid #DCDCDC
                                .name
                                    flex 1
                                    color #616977
                                    font-size 12px
                                .right-txt
                                    margin-right 10px
                                    width fit-content
                                    color #A9B1C0
                                    font-size 11px
                                .iconarrow_right
                                    font-size 11px
                                    color #A9B1C0






</style>
